<template>
  <!-- 个人主页 -->
  <div class="person">
    <!-- 页头 -->
    <van-nav-bar class="navbar" placeholder fixed>
      <router-link to="/upload" slot="left"
        ><img src="http://qxkmdhmin.hn-bkt.clouddn.com/jia.png"
      /></router-link>
      <input
        class="searchCai"
        type="text"
        slot="left"
        placeholder="搜索菜谱、食材"
        @focus="focusgo"
      />
      <router-link to="/setting" slot="right">
        <img
          class="item-shezhi"
          src="http://qxkmdhmin.hn-bkt.clouddn.com/shezhi1.png"
        />
      </router-link>
    </van-nav-bar>
    <!-- 用户名头像 -->
    <van-row class="item-row">
      <!-- 设置用户名占比为9 -->
      <van-col span="9" class="item-name">{{ name }}</van-col>
      <!-- 设置个人头像占比为15 -->
      <van-col span="15">
        <van-image class="item-img" round :src="`${picture}`" />
      </van-col>
    </van-row>
    <!-- 个人关注和粉丝的数量 -->
    <van-row type="flex" class="item-count">
      <van-col span="4" class="item-count-col">1</van-col>
      <van-col span="4" class="item-count-col">0</van-col>
    </van-row>
    <van-row type="flex" class="item-count-name">
      <van-col span="4">关注</van-col>
      <van-col span="4">粉丝</van-col>
    </van-row>
    <!-- 分割线  设置内联样式 -->
    <van-divider
      class="item-split-line"
      :style="{ borderColor: 'gray', padding: '0 0' }"
    ></van-divider>
    <!-- 个人介绍文本域 -->
    <van-row>
      <div class="item-text">{{ text }}</div>
    </van-row>
    <!-- 分割线  设置内联样式 -->
    <van-divider
      class="item-split-line"
      :style="{ borderColor: 'gray', padding: '0 0' }"
    ></van-divider>
    <!-- 个人菜谱和分享 -->
    <van-tabs>
      <van-tab class="item-tab-left" title="菜谱">
        <!-- 点击进入自己的菜谱 -->
        <div class="item-div">
          <router-link to="/mdetails">
            <img
              class="item-div-img1"
              src="http://qxkmdhmin.hn-bkt.clouddn.com/food1.jpg"
            />
          </router-link>
          <p>黄豆焖猪蹄</p>
          <img class="item-div-img2" :src="`${picture}`" />
          <span>{{ name }}</span>
        </div>
        <div class="item-div">
          <router-link to="/mdetails">
            <img
              class="item-div-img1"
              src="http://qxkmdhmin.hn-bkt.clouddn.com/food2.jpg"
            />
          </router-link>
          <p>红烧排骨</p>
          <img class="item-div-img2" :src="`${picture}`" />
          <span>{{ name }}</span>
        </div>
        <div class="item-div">
          <router-link to="/mdetails">
            <img
              class="item-div-img1"
              src="http://qxkmdhmin.hn-bkt.clouddn.com/food3.jpg"
            />
          </router-link>
          <p>香辣鸡翅</p>
          <img class="item-div-img2" :src="`${picture}`" />
          <span>{{ name }}</span>
        </div>
      </van-tab>
      <van-tab class="item-tab-right" title="作品">
        <van-row>
          <van-col>
            <img
              class="item-row-img"
              src="http://qxkmdhmin.hn-bkt.clouddn.com/food3.jpg"
            />
          </van-col>

          <van-col>
            <img
              class="item-row-img"
              src="http://qxkmdhmin.hn-bkt.clouddn.com/food1.jpg"
            />
          </van-col>
        </van-row>
      </van-tab>
    </van-tabs>
    <!-- 底部标签栏 -->
    <my-tabbar style="margin-top: 50px"></my-tabbar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      foodname: "红烧排骨",
      name: "",
      text: "",
      picture: "",
    };
  },
  // 页面挂载是执行
  mounted() {
    this.getdata();
  },
  methods: {
    focusgo() {
      this.$router.push("/search");
    },
    getdata() {
      this.axios.get("/user/data?uid=1").then((result) => {
        // 获取数据库的用户名和用户图片  渲染到页面
        console.log(result);
        this.name = result.data.results[0].uname;
        this.picture = result.data.results[0].headimg;
        this.text = result.data.results[0].intr;
        console.log(this.picture);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.searchCai {
  border-radius: 7px;
  border: none;
  background: #f3f3ecdc url("http://qxkmdhmin.hn-bkt.clouddn.com/sousuo.png") 3px 10px no-repeat;
  text-indent: 2em;
  height: 35px;
  width: 245px;
  font-size: 15px;
  margin-left: 17px;
}
.item-shezhi {
  // 给设置图标设置样式
  width: 30px;
  height: 30px;
}
.item-row {
  // 页头和用户名之间拉开距离
  margin-top: 1em;
  .item-name {
    // 设置用户的行高 使其水平居中
    line-height: 83px;
    // 给用户名添加左边距  字体大小20px
    padding-left: 1em;
    font-size: 20px;
  }
  .item-img {
    // 将图片右对齐
    left: 120px;
    width: 5em;
    height: 5em;
  }
}

.item-count-name {
  // 将关注和粉丝字号显示添加左边距
  padding-left: 1.5em;
  // 关注和粉丝字号与数量之间添加距离
  margin-top: 0.2em;
  font-size: 14px;
}
.item-count-col {
  // 将关注和粉丝数量显示添加左边距
  padding-left: 2em;
  font-size: 14px;
}
.item-text {
  // 设置文字文本域的样式
  // 强制换行
  word-wrap: break-word;
  // 通过行高控制行间距
  line-height: 20px;
  padding-left: 15px;
  width: 345px;
  height: 60px;
  font-size: 14px;
}
.item-tab-left {
  margin-top: 1em;
}
.item-tab-right {
  margin-top: 1em;
}
.item-row-img {
  border-radius: 10%;
  width: 180px;
  margin-bottom: 10px;
  margin-left: 5px;
}
.item-div {
  display: inline-block;
  margin-bottom: 30px;
}
.item-div-img1 {
  margin-left: 25px;
  border-radius: 10%;
  width: 150px;
}
.item-div-img2 {
  margin-left: 25px;
  // margin-bottom: 10px
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
span {
  margin-left: 5px;
  font-size: 12px;
}
p {
  margin: 5px 25px;
  font-size: 16px;
}
</style>
